<template>
  <div class="addMerchant">
    <div class="merchant-info">
      <ul v-if="merchantsData">
        <li>
          <span>店铺名称</span>
          <input
            v-model="merchantsData.shopName"
            type="text"
            placeholder="请输入店铺名称"
          />
        </li>
        <li>
          <span>logo</span>
            <el-upload
                    class="upload-demo"
                    action="uploadurl"
                    list-type="picture-card"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :before-upload="beforeUpload"
                    :http-request="uploadHttpLogo"
                    :file-list="fileList">
                    <img v-if="merchantsData.shopLogo" :src="merchantsData.shopLogo" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          <!-- <el-upload
            class="upload-demo"
            action="uploadurl"
            :before-upload="beforeUpload"
            list-type="picture-card"
          >
            <img v-if="merchantsData.shopLogo" :src="merchantsData.shopLogo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> -->
        </li>
        <li>
          <span>店铺负责人</span>
          <input
            v-model="merchantsData.chargePersonName"
            type="text"
            placeholder="请输入店铺负责人"
          />
        </li>
        <li></li>
        <li>
          <span>联系方式</span>
          <input
            v-model="merchantsData.chargePersonPhone"
            type="text"
            placeholder="请输入联系方式"
          />
        </li>
        <li>
          <span>店铺地址</span>
          <input
            v-model="merchantsData.shopAdress"
            type="text"
            placeholder="请输入店铺地址"
          />
        </li>
        <li>
          <span>详细地址</span>
          <input
            v-model="merchantsData.shopAdressDetail"
            type="text"
            placeholder="请输入详细地址"
          />
        </li>
        <li>
          <span>营业执照</span>
            <el-upload
                    class="upload-demo"
                    action="uploadurl"
                    list-type="picture-card"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :before-upload="beforeUpload"
                    :http-request="uploadHttpyyzz"
                    :file-list="fileList">
                    <img v-if="merchantsData.enterpriseLicense" :src="merchantsData.enterpriseLicense" class="avatar" />
                     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          <!-- <el-upload
            class="upload-demo"
            action="uploadurl"
            :before-upload="beforeUpload"
            list-type="picture-card"
          >
            <img v-if="merchantsData.enterpriseLicense" :src="merchantsData.enterpriseLicense" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> -->
         
        </li>
        <li>
          <span>食品经营许可证</span>
            <el-upload
                    class="upload-demo"
                    action="uploadurl"
                    list-type="picture-card"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :before-upload="beforeUpload"
                    :http-request="uploadHttpxkz"
                    :file-list="fileList">
                    <img v-if="merchantsData.foodCard" :src="merchantsData.foodCard" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </li>
        <li>
          <span>店铺门头照</span>
            <el-upload
                    class="upload-demo"
                    action="uploadurl"
                    list-type="picture-card"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :before-upload="beforeUpload"
                    :http-request="uploadHttpmtz"
                    :file-list="fileList">
                   <img v-if="merchantsData.doorCard" :src="merchantsData.doorCard" class="avatar" />
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </li>
         <li>
          <span>平台服务费</span>
          <input type="text" v-model="merchantsData.poundage" placeholder="请输入整数" />%
        </li>
        <li>
          <span>是否缴纳保证金</span>
          <el-select v-model="merchantsData.bondState" placeholder="请选择">
            <el-option
              v-for="item in searchoptions1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </li>
        <li v-show="merchantsData.bondState==1">
          <span>保证金金额</span>
          <input type="text" v-model="merchantsData.bondMoney" placeholder="请输入保证金金额" /><span style="width:25px">元</span>
        </li>
        <li v-show="merchantsData.bondState==1">
          <span>缴费方式</span>
          <input v-model="merchantsData.paymentMethod" type="text" placeholder="请输入缴费方式" />
        </li>
        <li v-show="merchantsData.bondState==1">
          <span>缴费账号</span>
          <el-select v-model="merchantsData.paymentCode" placeholder="请选择">
            <el-option
              v-for="item in paymentAccount"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
             <input v-model="merchantsData.paymentCard" type="text" placeholder="" />
        </li>
        <li>
          <span>生效日期</span>
          <el-date-picker
            v-model="merchantsData.effectiveDate"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </li>
        <li>
          <span>失效年限</span>
          <input v-model="merchantsData.effectiveYear" type="text" placeholder="请输入失效年限" />
        </li>
        <li></li>
        <li>
          <span>合同状态</span>
          <template>
              <el-radio v-model="merchantsData.contractState" label=1>有效</el-radio>
              <el-radio v-model="merchantsData.contractState" label=0>无效</el-radio>
            </template>
        </li>
        <li>
          <span class="my-btn" id="go-back" @click="goBack">取消</span>
          <span class="my-btn my-back-blue" style="width: 60px;text-align:center;" @click="sumbit">提交</span
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  model:{

  },
  
  data() {
    return {
      fileList:[],
      searchoptions1: [
        //是否缴纳保证金
        { label: "未缴纳", value: 0 },
        { label: "已缴纳", value: 1 },
      ],
      paymentAccount: [
        // 缴费账号
        { label: "支付宝", value: 1 },
        { label: "微信", value: 2 },
        { label: "银行卡", value: 3 },
      ],
      merchantsData:'',
      radioValue:'1',
    };
  },
  mounted() {
    this.loadShopList()
  },
  watch:{
    
  },
  components:{

  },
  computed:{

  },
  methods: {
         //删除图片
        handleRemove(file, fileList) {
        },
        handlePreview(file) {
            console.log(file);
        },
        //提示上传文件个数
        handleExceed(files, fileList) {
            console.log(files)
            this.$message.warning("只能上传一个文件，请先删除，再上传新文件！");
        },
        //删除提示
        beforeRemove(file, fileList) {
            if(!this.isLt2M){
                return this.$alert('只能上传jpg/png文件，且不超过300kb', '图片上传限制', {confirmButtonText: '确定',});
            }
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        //提示上传文件大小
        beforeUpload(file){
            const isLt2M = file.size / 1024 / 1024 < 0.3;
            this.isLt2M=isLt2M
            console.log(file.size,isLt2M)
            if (!isLt2M) {
                // this.common.errorTip('上传文件大小不能超过 2MB!');
                // this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        uploadHttpLogo(params){
            var  formData = new FormData();
            formData.append('file', params.file);
            this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                this.merchantsData.shopLogo=res.data.data
            })
        },
        uploadHttpyyzz(params){
            var  formData = new FormData();
            formData.append('file', params.file);
            this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                this.merchantsData.enterpriseLicense=res.data.data
            })
        },
        uploadHttpxkz(params){
            var  formData = new FormData();
            formData.append('file', params.file);
            this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                this.merchantsData.foodCard=res.data.data
            })
        },
        uploadHttpmtz(params){
            var  formData = new FormData();
            formData.append('file', params.file);
            this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                this.merchantsData.doorCard=res.data.data
            })
        },
    uploadHttp() {},
    // 取消
    goBack() {
      this.$router.push("/index/merchantManagement");
    },
    loadShopList(){
            var param={
               shopId:this.$route.query.shopId,
            }
            this.axios({
                url:'/shop/getById',
                method:'post',
                data:JSON.stringify(param),
            }).then(res=>{
                res.data.data.poundage=res.data.data.poundage*100
                this.merchantsData=res.data.data
                this.merchantsData.contractState=res.data.data.contractState.toString()
            })
        },

    // 提交
    sumbit() {
      var Obj={
        shopId:this.$route.query.shopId,
        shopName:this.merchantsData.shopName,
        shopLogo:this.merchantsData.shopLogo.url,
        chargePersonName:this.merchantsData.chargePersonName,
        chargePersonPhone:this.merchantsData.chargePersonPhone,
        shopAdress:this.merchantsData.shopAdress,
        shopAdressDetail:this.merchantsData.shopAdressDetail,
        enterpriseLicense:this.merchantsData.enterpriseLicense.url,
        foodCard:this.merchantsData.foodCard.url,
        doorCard:this.merchantsData.doorCard.url,
        poundage:this.merchantsData.poundage/100,
        bondState:this.merchantsData.bondState,
        bondMoney:this.merchantsData.bondMoney,
        paymentMethod:this.merchantsData.paymentMethod,
        paymentCode:this.merchantsData.paymentCode,
        paymentCard:this.merchantsData.paymentCard,
        effectiveDate:this.merchantsData.effectiveDate,
        effectiveYear:this.merchantsData.effectiveYear,
        contractState:this.merchantsData.contractState
      }
      this.axios({
        url: "/shop/update",
        method: "post",
        data:Obj,
      }).then((res) => {
        //处理异常
        if (res.data.code =='') {
           this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.$router.go(-1)
        }
      });
    },
  },
  watch: {},
};
</script>

<style scoped>
.addMerchant {
  position: relative;
}
.merchant-info ul li {
  margin-top: 15px;
  display: flex;
  align-items: center;
}
.merchant-info ul li span {
  display: inline-block;
  margin-right: 20px;
  width: 120px;
  text-align: right;
}

#go-back {
  width: 60px;
  padding: 7px;
  text-align: center;
  margin-left: 64px;
}
/* 合同状态 */
label input {
  height: 12px;
}

/* 上传按钮 */
.upload-demo {
  display: inline-block;
}
.my-btn:hover {
  cursor: pointer;
}
img{
  height: 148px;
}
</style>